<template>
  <div>
    <div class="swiper-container" id="swiper-nav">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="(nav, index) in navList" :key="index" :class="{selected: currentIndex === index}">
          <span>{{nav}}</span>
        </div>
        <div class="bar">
          <div class="color"></div>
        </div>
      </div>
    </div>
    <div class="swiper-container" id="swiper-page">
      <div class="swiper-wrapper">
        <div class="swiper-slide slidepage" v-for="(item, index) in navList" :key="index">
          {{item}}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Swiper from 'swiper'
import 'swiper/dist/css/swiper.min.css'

export default {
  props: {
    // 滚动条的长度px
    barWidth: {
      type: Number,
      default: 36
    },
    // 滚动条的颜色
    barColor: {
      type: String,
      default: ''
    },
    // 切换速度300ms
    speed: {
      type: Number,
      default: 300
    },
    // 一页显示多少个导航
    slidesPerView: {
      type: Number,
      default: 5
    }
    // ,
    // 导航数据列表
    // navList: {
    //   type: Array,
    //   default: []
    // },
  },
  data() {
    return {
      navSwiper: null,
      pageSwiper: null,
      currentIndex: 0,
      _tSpeed: 300,
      navList: [
        '热卖',
        '水果',
        '乳品',
        '零食',
        '肉类',
        '水产',
        '酒饮',
        '素食',
        '火锅'
      ]
    }
  },
  mounted() {
    this.initNavs()
    this.initPages()
    this.initSwiperEvent()
  },
  methods: {
    initNavs() {
      const _self = this
      this.navSwiper = new Swiper('#swiper-nav', {
        slidesPerView: _self.slidesPerView,
        freeMode: true,
        on: {
          init: function() {
            _self.navSlideWidth = this.slides.eq(0).css('width')

            _self.scrollBar = this.$el.find('.bar')
            _self.scrollBar.css('width', _self.navSlideWidth)
            _self.scrollBar.transition(_self.tSpeed)
            _self.navDistanceSum = this.slides[this.slides.length - 1].offsetLeft // 最后一个slide的位置

            _self.clientWidth = parseInt(this.$wrapperEl.css('width')) // Nav的可视宽度
            let navWidth = 0
            for (let i = 0; i < this.slides.length; i++) {
              navWidth += parseInt(this.slides.eq(i).css('width'))
            }
            _self.navWidth = navWidth

            // topBar = this.$el.parents('body').find('#top') // 页头
          }
        }
      })
    },
    initPages() {
      const _self = this
      this.pageSwiper = new Swiper('#swiper-page', {
        watchSlidesProgress: true,
        resistanceRatio: 0,
        on: {
          touchMove: function() {
            const progress = this.progress
            _self.scrollBar.transition(0)
            _self.scrollBar.transform(
              'translateX(' + _self.navDistanceSum * progress + 'px)'
            )
            // 粉色255,72,145灰色51,51,51
            for (let i = 0; i < this.slides.length; i++) {
              const slideProgress = this.slides[i].progress
              if (Math.abs(slideProgress) < 1) {
                const r = Math.floor(
                  (255 - 51) * (1 - Math.pow(Math.abs(slideProgress), 2)) + 51
                )
                const g = Math.floor(
                  (72 - 51) * (1 - Math.pow(Math.abs(slideProgress), 2)) + 51
                )
                const b = Math.floor(
                  (145 - 51) * (1 - Math.pow(Math.abs(slideProgress), 2)) + 51
                )
                _self.navSwiper.slides
                  .eq(i)
                  .find('span')
                  .css('color', 'rgba(' + r + ',' + g + ',' + b + ',1)')
              }
            }
          },
          transitionStart: function() {
            const activeIndex = this.activeIndex
            const activeSlidePosition =
            _self.navSwiper.slides[activeIndex].offsetLeft
            // 释放时导航粉色条移动过渡
            _self.scrollBar.transition(_self.tSpeed)
            _self.scrollBar.transform('translateX(' + activeSlidePosition + 'px)')
            // 释放时文字变色过渡
            _self.navSwiper.slides
              .eq(activeIndex)
              .find('span')
              .transition(_self.tSpeed)
            _self.navSwiper.slides
              .eq(activeIndex)
              .find('span')
              .css('color', 'rgba(255,72,145,1)')
            if (activeIndex > 0) {
              _self.navSwiper.slides
                .eq(activeIndex - 1)
                .find('span')
                .transition(_self.tSpeed)
              _self.navSwiper.slides
                .eq(activeIndex - 1)
                .find('span')
                .css('color', 'rgba(51,51,51,1)')
            }
            if (activeIndex < this.slides.length) {
              _self.navSwiper.slides
                .eq(activeIndex + 1)
                .find('span')
                .transition(_self.tSpeed)
              _self.navSwiper.slides
                .eq(activeIndex + 1)
                .find('span')
                .css('color', 'rgba(51,51,51,1)')
            }
            // 导航居中
            const navActiveSlideLeft = _self.navSwiper.slides[activeIndex].offsetLeft // activeSlide距左边的距离

            _self.navSwiper.setTransition(_self.tSpeed)
            if (
              navActiveSlideLeft <
              (_self.clientWidth - parseInt(_self.navSlideWidth)) / 2
            ) {
              _self.navSwiper.setTranslate(0)
            } else if (
              navActiveSlideLeft >
              _self.navWidth -
                (parseInt(_self.navSlideWidth) + _self.clientWidth) / 2
            ) {
              _self.navSwiper.setTranslate(_self.clientWidth - _self.navWidth)
            } else {
              _self.navSwiper.setTranslate(
                (_self.clientWidth - parseInt(_self.navSlideWidth)) / 2 -
                  navActiveSlideLeft
              )
            }
          }
        }
      })
    },
    initSwiperEvent() {
      const _self = this
      this.navSwiper.$el.on('touchstart', function(e) {
        e.preventDefault() // 去掉按压阴影
      })
      this.navSwiper.on('tap', function(e) {
        _self.currentIndex = this.clickedIndex
        _self.pageSwiper.slideTo(_self.currentIndex, 0)
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
#swiper-nav
  border-bottom 1px solid #ebebeb
  .swiper-slide
    span
      margin 0 5px
      text-align center
      display block
      line-height 2.5
      font-size 14px
      color #333333
  .selected
    span
      color rgba(255, 72, 145, 1)
  .bar
    width 50px
    height 3px
    position absolute
    bottom 0px
    .color
      width 36px
      margin 0 auto
      height 3px
      background #ff4891
</style>

